<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>请求历史</title>

    <script src="/static/commonCss.js"></script>
    <script src="/static/commonJS.js"></script>

    <style>

        html {
            height: 90%;
        }

        body {
            height: 100%;
        }

        #app {
            height: 100%;
        }

        .infinite-list {
            height: 300px;
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .infinite-list .infinite-list-item {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 50px;
            /*background: var(--el-color-primary-light-9);*/
            margin: 10px;
        }

        .success-item {
            /*color: #60f19f;*/
            /*background: #60f19f;*/
            color: var(--el-color-primary);
            background: rgb(236, 245, 255);
        }

        .fail-item {
            color: white;
            background: #E37373FF;
        }

        .infinite-list .infinite-list-item + .list-item {
            margin-top: 10px;
        }
    </style>
</head>
<body>

<div id="app">
    <div th:replace="~{/common/menu :: menu}"></div>

    <div style="padding-top: 70px; height: 100%;">
        <ul v-infinite-scroll="loadRequest" class="infinite-list"
            style="height: 95%; overflow-y: auto; margin-bottom: 10px">
            <li v-for="(r, idx) in requestList" :key="idx"
                style="cursor: pointer"
                @click="showDetail(r)"
                :class="'infinite-list-item ' + (r.success ? 'success-item' : 'fail-item')">
                {{ (idx + 1) + ' -- ' + r.addDate }}
            </li>
            <p v-if="loading">加载中...</p>
            <p v-if="noMore">没有更多数据了</p>
        </ul>
    </div>

    <el-dialog
            v-model="showDailog"
            style="width: 90%; height: 70%">
        <el-form :model="showRequest"
                 label-width="auto"
                 label-suffix="："
                 style="max-width: 600px; margin: 0 auto">
            <el-form-item label="时间">
                <el-input readonly v-model="showRequest.addDate"/>
<!--                <el-text>{{ showRequest.addDate }}</el-text>-->
            </el-form-item>
            <el-form-item label="结果">
                <el-text>{{ showRequest.success ? '成功' : '失败' }}</el-text>
            </el-form-item>
            <el-form-item label="响应报文">
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 6 }"
                        readonly v-model="showRequest.response_log"/>
<!--                <el-text>{{ showRequest.response_log }}</el-text>-->
            </el-form-item>
            <el-form-item label="请求报文">
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 6 }"
                        readonly v-model="showRequest.request_log"/>
<!--                <el-text>{{ showRequest.request_log }}</el-text>-->
            </el-form-item>
        </el-form>
    </el-dialog>

</div>

</body>

<script>

    const app = {
        mounted() {
            // this.loadRequest();
        },
        data() {
            return {
                userId: [[${userId}]],
                showDailog: false,
                showRequest: {},
                requestList: [],
                loading: false,
                noMore: false,
            }
        },
        methods: {
            selectMenu,
            loadRequest() {

                if (this.noMore || this.loading) {
                    return;
                }

                const params = {};
                if (this.requestList && this.requestList.length > 0) {
                    params["fromDate"] = this.requestList[this.requestList.length - 1]["addDate"]
                }

                this.loading = true;
                // var loading = startLoading();
                axios.post("/api/loadNextHistory", params)
                    .then(data => {
                        if (data.status == 200 && data.data.code == "200") {
                            data = data.data.data;
                            if (!data || data.length == 0) {
                                this.noMore = true;
                            } else {
                                this.requestList.push(...data);
                            }
                        } else {
                            showMessage("error", JSON.stringify(data.data ? data.data : data));
                        }
                        this.loading = false;
                        // loading.close();
                    })
                    .catch(ex => {
                        this.loading = false;
                        // loading.close();
                        showMessage("error", JSON.stringify(ex));
                    })
            },
            showDetail(r) {
                console.log(r);
                this.showDailog = true;
                this.showRequest = r;
            }
        }
    };

    bindApp("app", app);
</script>
</html>